import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-charts',
  templateUrl: './charts.component.html',
  styleUrls: ['./charts.component.scss'],
})
export class ChartsComponent implements OnInit {
  //线形图  
  lineOptions = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: function (params) {
        let data = params[0];
        console.log(params)
        let showHtml = `
        <div class=‘charts-line’>
            <div style='height:25px;font-size:16px;font-family:PingFangSC;'>${new Date().getFullYear()}年${data.name}</div>
            <div>
                <div>案件数量 ： <span>374件</span></div>
                <div>
                    <span style='display:inline-block;width:60px;text-align:right; '>办理中 ：</span>   <span>186件</span>
                    <span >同比增长 ：</span> <span>-1.2%</span> 
                    <span >环比增长 ：</span> <span>34.2%</span> 
                </div> 
                <div> 
                    <span style='display:inline-block;width:60px;text-align:right; '>结案 ：</span>   <span>186件</span>
                    <span >同比增长 ：</span> <span>-1.2%</span> 
                    <span >环比增长 ：</span> <span>34.2%</span> 
                 </div>
                <div> 
                    <span style='display:inline-block;width:60px;text-align:right; '>移送 ：</span>   <span>186件</span>
                    <span >同比增长 ：</span> <span>-1.2%</span> 
                    <span >环比增长 ：</span> <span>34.2%</span> 
                 </div>
            </div>
        </div>
        `
        return showHtml;
      },
    },

    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {   },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'line',
        stack: 'counts',
        color: '#28C978',
        areaStyle: { normal: {} },
        data: [50, 10, 20, 100, 300, 200, 100, 40, 100, 150, 130, 160]
      }
    ]
  }

  //柱状图
  graphOptions = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }, 
      formatter: function (params) {
        console.log(params)
        let data = params[0]
        let showHtml = `
        <div class=‘charts-line’>
            <div style='height:25px;font-size:16px;font-family:PingFangSC;'>${data.name}</div>
            <div>
                <div><span style='display:inline-block;width:80px;text-align:right; '>案件数量 ：</span> <span>374件</span></div>
                <div>
                    <span style='display:inline-block;width:80px;text-align:right; '>办理中 ：</span>   <span>186件</span>
                </div> 
                <div> 
                    <span style='display:inline-block;width:80px;text-align:right; '>结案 ：</span>   <span>186件</span>
                 </div>
                <div> 
                    <span style='display:inline-block;width:80px;text-align:right; '>移送 ：</span>   <span>186件</span>
                 </div>
            </div>
        </div>
        `
        return showHtml;
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        color: '#7EBAF2',
        data: ['新城区', '赛罕区', '玉泉区', '回民区', '和林格尔县', '托克托县', '武川县', '土默特左旗', '清水河县'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      name: 'Counters',
      type: 'bar',
      barWidth: '60%',
      data: [10, 52, 200, 334, 390, 330, 220, 100, 80]
    }]
  };

  //饼图数据
  public pieData = [
    { value: 10, name: '生产企业' },
    { value: 5, name: '经营企业' },
    { value: 15, name: '医疗机构' },
    { value: 25, name: '其他' },
  ]

  //饼图
  pieOptions = {
    tooltip: {
      trigger: 'item',
      formatter: (params)=>{ 
        let showHtml = `
        <div style='height:25px;font-size:16px;font-family:PingFangSC;'>${params.data.name}</div>
        <div>违法主体数量 ：${params.data.value} 件</div>
        `
        return showHtml
      }
    }, 
    legend: {
      orient: 'vertical',
      x: '70%',
      y: 'center',
      icon: 'rect', 
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      data: ['生产企业', '经营企业', '医疗机构', '其他'],
      formatter: (params) => {
        var arr = [
          '{a|' + `${params}` + ':}',
          '{b|' + `${this.pieData.find(pie => params === pie.name).value}件` + '}',
        ]
        return arr.join('');
      },
      textStyle: {
        rich: {
          a: {
            fontSize: 12,
            width: 60,
            verticalAlign: 'center',
            align: 'left',
            padding: [0, 0, 0, 0],
            lineHeight: 25
          },
          b: {
            fontSize: 12,
            align: 'center',
            padding: [0, 0, 0, 5],
            lineHeight: 25
          }
        }
      }
    },
    calculable: true,
    series: [
      {
        type: 'pie',
        data: [
          { value: 10, name: '生产企业' },
          { value: 5, name: '经营企业' },
          { value: 15, name: '医疗机构' },
          { value: 25, name: '其他' },
        ],
        center: ["30%", "50%"],
        itemStyle: {
          normal: {
            color: function (params) {
              //自定义颜色
              var colorList = ['#EB7800', '#4887F6', '#13C84E', '#FEDB5C']
              return colorList[params.dataIndex]
            } 
          }
        }
      },
    ],

  }


  constructor() { }
 
  ngOnInit() {

  }

} 
